<template>
    <el-row class="enterpriseinfo">
        <el-col :span="24" class="content-header">企业详细信息</el-col>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-col :span="24">
                    <el-card class="box">
                        <el-col :span="24" class="userimg">
                            <img src="~@/assets/images/tab_user_on.png">
                        </el-col>
                        <el-col :span="24" class="username">
                            某某公司
                        </el-col>
                        <el-col :span="24" class="createdate">
                            申请时间 : 2016-08-11 07:51:56.0
                        </el-col>
                        <el-row class="list-group-item">
                            <el-col :span="22" :offset="1">
                                <b>客户类别</b>
                                <a>大酒楼</a>
                            </el-col>
                            <el-col :span="22" :offset="1">
                                <b>客户级别</b>
                                <a>一级</a>
                            </el-col>
                            <el-col :span="22" :offset="1">
                                <b>客户行业</b>
                                <a>餐饮业</a>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <el-col :span="24">
                    <el-card class="box">
                        <el-col :span="24" class='box-header'>营业执照</el-col>
                        <el-col :span="24" class='box-body'>
                            <img src="~@/assets/images/default_image_background.jpg" width="100%" />
                        </el-col>
                    </el-card>
                </el-col>
            </el-col>
            <el-col :span="18">
                <el-tabs type="border-card">
                    <el-tab-pane label="企业信息" class="enter-info">
                        <el-collapse v-model="activeNames">
                            <el-collapse-item title="账号信息" name="1">
                                <el-form :inline="true" :model="userInfoForm" :label-position="labelPosition" label-width="100px">
                                    <el-form-item label="客户账号">
                                        <el-input v-model="userInfoForm.loginId" placeholder="客户账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="客户名称">
                                        <el-input v-model="userInfoForm.userName" placeholder="客户名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="名称缩写">
                                        <el-input v-model="userInfoForm.abbreviation" placeholder="名称缩写"></el-input>
                                    </el-form-item>
                                    <el-form-item label="客户级别">
                                        <el-select v-model="userInfoForm.level" placeholder="客户级别">
                                            <el-option label="一级" value="1"></el-option>
                                            <el-option label="二级" value="2"></el-option>
                                            <el-option label="三级" value="3"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="配送商">
                                        <el-input v-model="userInfoForm.distBus" placeholder="配送商"></el-input>
                                    </el-form-item>
                                    <el-form-item label="配送仓">
                                        <el-input v-model="userInfoForm.distWare" placeholder="配送仓"></el-input>
                                    </el-form-item>
                                    <el-form-item label="客户资格">
                                        <el-select v-model="userInfoForm.qualifi" placeholder="客户资格">
                                            <el-option label="专票客户" value="1"></el-option>
                                            <el-option label="普票客户" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="所属行业">
                                        <el-select v-model="userInfoForm.industry" placeholder="所属行业">
                                            <el-option label="餐饮业" value="1"></el-option>
                                            <el-option label="商贸业" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="所属类别">
                                        <el-input v-model="userInfoForm.category" placeholder="所属类别"></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态">
                                        <el-select v-model="userInfoForm.status" placeholder="状态">
                                            <el-option label="启用" value="1"></el-option>
                                            <el-option label="停用" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="ERP编号">
                                        <el-input v-model="userInfoForm.erpId" placeholder="ERP编号"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-collapse-item>
                            <el-collapse-item title="企业信息" name="2">
                                <el-form :inline="true" :model="userInfoForm" :label-position="labelPosition" label-width="100px">
                                    <el-form-item label="省/市/县">
                                        <el-input v-model="userInfoForm.region" placeholder="省/市/县"></el-input>
                                    </el-form-item>
                                    <el-form-item label="乡镇">
                                        <el-select v-model="userInfoForm.township" placeholder="乡镇">
                                            <el-option label="海城镇" value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="详细地址">
                                        <el-input v-model="userInfoForm.address" placeholder="详细地址"></el-input>
                                    </el-form-item>
                                    <el-form-item label="经营区域">
                                        <el-input v-model="userInfoForm.operatingArea" placeholder="经营区域"></el-input>
                                    </el-form-item>
                                    <el-form-item label="所属区域">
                                        <el-input v-model="userInfoForm.belongToRegion" placeholder="所属区域"></el-input>
                                    </el-form-item>
                                    <el-form-item label="市场">
                                        <el-input v-model="userInfoForm.market" placeholder="市场"></el-input>
                                    </el-form-item>
                                    <el-form-item label="客户路线">
                                        <el-select v-model="userInfoForm.enterRoute" placeholder="客户路线">
                                            <el-option label="A-B" value="1"></el-option>
                                            <el-option label="C-D" value="2"></el-option>
                                            <el-option label="D-E" value="3"></el-option>
                                            <el-option label="E-F" value="4"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="银行名称">
                                        <el-input v-model="userInfoForm.bankName" placeholder="银行名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="银行账号">
                                        <el-input v-model="userInfoForm.bankNo" placeholder="银行账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="支付宝名称">
                                        <el-input v-model="userInfoForm.alipayName" placeholder="支付宝名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="支付宝账号">
                                        <el-input v-model="userInfoForm.alipayNo" placeholder="支付宝账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="支付宝合作者身份">
                                        <el-input v-model="userInfoForm.alipayIdentity" placeholder="支付宝合作者身份"></el-input>
                                    </el-form-item>
                                    <el-form-item label="支付宝RSA私钥">
                                        <el-input v-model="userInfoForm.alipayRsaPk" placeholder="支付宝RSA私钥"></el-input>
                                    </el-form-item>
                                    <el-form-item label="税务账号">
                                        <el-input v-model="userInfoForm.takNo" placeholder="税务账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系人">
                                        <el-input v-model="userInfoForm.linkman" placeholder="联系人"></el-input>
                                    </el-form-item>
                                    <el-form-item label="微信账号">
                                        <el-input v-model="userInfoForm.weChatNo" placeholder="微信账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="移动电话">
                                        <el-input v-model="userInfoForm.mobile" placeholder="移动电话"></el-input>
                                    </el-form-item>
                                    <el-form-item label="固定电话">
                                        <el-input v-model="userInfoForm.telephone" placeholder="固定电话"></el-input>
                                    </el-form-item>
                                    <el-form-item label="发运方式">
                                        <el-select v-model="userInfoForm.shipVia" placeholder="发运方式">
                                            <el-option label="自提" value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="销售方式">
                                        <el-select v-model="userInfoForm.salesMethod" placeholder="销售方式">
                                            <el-option label="赊账" value="1"></el-option>
                                            <el-option label="现销" value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </el-collapse-item>
                            <el-collapse-item title="经营范围" name="3">
                                <el-form :model="userInfoForm" :label-position="labelPosition" label-width="100px">
                                    <el-form-item label="产品类别">
                                        <el-input class="input" v-model="userInfoForm.productCategory" placeholder="产品类别"></el-input>
                                    </el-form-item>
                                    <el-form-item label="产品明细">
                                        <el-button plain>添加</el-button>
                                    </el-form-item>
                                    <el-form-item label="" class="productDetail">
                                        <v-productList v-model="productList"></v-productList>
                                    </el-form-item>
                                </el-form>
                            </el-collapse-item>
                            <el-collapse-item title="认证材料" name="4">
                                <el-form :model="userInfoForm" :label-position="labelPosition" label-width="100px">
                                    <el-form-item label="营业执照">
                                        <el-upload ref="licenseUpload" :limit="1" :on-exceed="handleExceed" :before-upload="beforeAvatarUpload" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" :auto-upload="false" list-type="picture">
                                            <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="LOGO">
                                        <el-upload ref="logoUpload" :limit="1" :on-exceed="handleExceed" :before-upload="beforeAvatarUpload" action="https://jsonplaceholder.typicode.com/posts/" :file-list="logoFileList" :auto-upload="false" list-type="picture">
                                            <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitLogoUpload">上传到服务器</el-button>
                                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                        </el-upload>
                                    </el-form-item>
                                </el-form>
                            </el-collapse-item>
                        </el-collapse>
                        <el-col :span="24" class="foot-button">
                            <el-button size="medium" type="primary">更新</el-button>
                        </el-col>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </el-row>
</template>
<script>
import "./enterpriseinfo.scss";
import router from "@/router/index";
import productList from "@/common/productList/index.vue";

export default {
  data() {
    return {
      currentDate: new Date(),
      activeNames: ["1", "2", "3", "4"],
      labelPosition: this.global.labelPosition,
      productList: [],
      logoFileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ],
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ],
      userInfoForm: {
        loginId: "",
        userName: "",
        abbreviation: "",
        level: "",
        distBus: "",
        distWare: "",
        category: "",
        qualifi: "",
        industry: "",
        status: "",
        erpId: "",

        region: "",
        township: "",
        address: "",
        operatingArea: "",
        belongToRegion: "",
        market: "",
        enterRoute: "",
        bankName: "",
        bankNo: "",
        alipayName: "",
        alipayNo: "",
        alipayIdentity: "",
        alipayRsaPk: "",
        takNo: "",
        linkman: "",
        weChatNo: "",
        mobile: "",
        telephone: "",
        shipVia: "",
        salesMethod: "",

        productCategory: ""
      }
    };
  },
  components: {
    "v-productList": productList
  },
  methods: {
    delProduct: function(index) {
      console.info(index);
      this.productArr.splice(index, 1);
    },
    handleExceed: function(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件。`);
    },
    beforeAvatarUpload: function(file) {
      console.info(file);
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 500KB!");
      }
      return isJPG && isLt2M;
    },
    submitUpload: function() {
      this.$refs.licenseUpload.submit();
    },
    submitLogoUpload: function() {
      this.$refs.logoUpload.submit();
    }
  },
  watch: {},
  created: function() {},
  beforeDestroy: function() {}
};
</script>